<template>
    <!--贴吧 分类列表（用户端）-->
    <div>
        <div class="bar_category">
            <el-row>
                贴吧分类：
            </el-row>
            <el-row v-if="categoryList.length > 0" class="category_content">  <!--如果已有贴吧类别则正常显示，  如果没有则提暂无贴吧类别-->
                <el-col :span="12" :offset="2">
                    <el-row v-for="category in categoryList" v-bind:key="category.id" class="category_item">
                        <!--首页分类列表 不高亮（无论是否 hover）-->
                        <div v-if="0 === parseInt(ctgId)">
                            <i class="el-icon-s-promotion"></i>
                            <!--                            <el-link type="info" target="_blank" :href="'/ctg?ctgId=' + category.id">{{category.name}}</el-link>-->
                            <el-link type="info" :href="'/ctg?ctgId=' + category.id" target="_blank">{{category.name}}</el-link>
                        </div>
                        <!--高亮选中的 分类(分类页面)-->
                        <div v-else-if="category.id === parseInt(ctgId)" class="highLightCtg">
                            <i class="el-icon-s-promotion"></i>
<!--                            <el-link type="info" target="_blank" :href="'/ctg?ctgId=' + category.id">{{category.name}}</el-link>-->
                            <el-link type="info" :href="'/ctg?ctgId=' + category.id">{{category.name}}</el-link>
                        </div>
                        <!--普通分类（分类页面）-->
                        <div v-else class="normalCtg">
                            <i class="el-icon-s-promotion"></i>
                            <el-link type="info" :href="'/ctg?ctgId=' + category.id">{{category.name}}</el-link>
                        </div>
                    </el-row>
                </el-col>
            </el-row>
            <el-row class="category_content" v-else >
                暂无贴吧分类。。。
            </el-row>
            <!--                            <el-row>-->
            <!--                                <span style="margin-left: 10px">动漫</span>-->
            <!--                                <span style="margin-left: 10px">动漫</span>-->
            <!--                                <span style="margin-left: 10px">动漫</span>-->
            <!--                                <span style="margin-left: 10px">动漫</span>-->
            <!--                                <span style="margin-left: 10px">动漫</span>-->
            <!--                                <span style="margin-left: 10px">动漫</span>-->
            <!--                                <span style="margin-left: 10px">动漫</span>-->
            <!--                                <span style="margin-left: 10px">动漫</span>-->
            <!--                                <span style="margin-left: 10px">动漫</span>-->
            <!--                                <span style="margin-left: 10px">动漫</span>-->
            <!--                            </el-row>-->
        </div>
    </div>
</template>

<script>
    export default {
        name: "categoryList",
        data(){
            return{
                categoryList: [], /*后台获取的贴吧类别 数组*/
                ctgId: 0, /*（当前选中的 要高亮的）分类id   默认赋值初始化为0（打开分类页面的话，正常情况下 传来的ctgId 都不会 = 0，会 > 0）*/
            }
        },
        props: ["ctgIdToShow"],
        created(){
            /*接收父组件 v-bind 的参数*/
            if (this.ctgIdToShow !== '' && this.ctgIdToShow != null){
                this.ctgId = this.ctgIdToShow;
                console.log("接收到：" + this.ctgId + "   type:" + typeof this.ctgId);  // string
            }

            /*初始化已有(贴吧)类别信息*/
            console.log("初始化已有(贴吧)类别信息。");
            //先判断有没有分类  没有分类则提示暂无贴吧分类  有则显示已有的类别列表）
            // this.$http.get("http://localhost:8081/category/getList").then(req=>{
            this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.categoryGetList).then(req=>{
                if (req.data !== ""){
                    if (req.data.rs.result_code === 200){ /*查询成功  pan  */
                        if (req.data.list.length === 0){  //暂无分类
                            console.log("暂无贴吧分类。")
                        }else {
                            console.log("正常初始化贴吧类别，类别list长度：" + req.data.list.length);
                            this.categoryList = req.data.list;

                            // 如果给当前组件传递了 ctgId参数（父组件是 贴吧分类页面）, 则计算分类名称并回传给父组件
                            if (this.ctgId !== '0'){
                                for (let i = 0; i < this.categoryList.length; i++) {
                                    if (parseInt(this.ctgId) === this.categoryList[i].id){
                                        this.$emit("setCtgName", this.categoryList[i].name);
                                    }
                                }
                            }
                        }
                    }else {  /*查询失败(出现异常)*/
                        this.$message({
                            showClose: true,
                            duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                            message: req.data.rs.msg,
                            type: 'error'
                        });
                    }
                }else {
                    this.$message.error('糟糕，服务器出事了。。');
                }
            });
        },
        mounted(){

        },
        methods:{

        },
        components:{

        }
    }
</script>

<style scoped>
    /*普通分类（非当前选中分类） 在鼠标 hover时 高亮*/
    .normalCtg:hover{
        background-color: bisque;
    }

    /*（当前页面）高亮的 贴吧分类 item*/
    .highLightCtg{
        background-color: bisque;
    }

    /*每一行贴吧类别*/
    .category_item{
        margin-bottom: 8px;
    }
    /*贴吧分类的具体分类   区别于“贴吧分类”字样*/
    .category_content{
        margin-top: 20px;
    }

    .bar_category{  /*贴吧分类*/
        margin-top: 40px;
    }
</style>